<template>
  <div class="header-container">
    <div class="l-content">
      <el-button @click="handleMenu()" icon="el-icon-menu" size="mini"></el-button>

    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <span class="user-id" style="margin-right: 5px">{{ userId }}({{ nickName }})</span>
          <el-badge :value="unreadCount" :max="99" :hidden="unreadCount === 0" class="item">
            <img class="user-logo" src="../assets/images/curry.jpg" alt="">
          </el-badge>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="personCenter()"><span>个人中心</span></el-dropdown-item>
          <el-dropdown-item @click.native="messageCenter()"><span>我的消息</span></el-dropdown-item>
          <el-dropdown-item @click.native="logOut()"><span>退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Cookie from "js-cookie";
import requestUtil from '../network/request';

export default {
  data() {
    return {
      unreadCount: 0, // 示例：未读消息数量，实际应用中应从后端获取
      userId: Cookie.get('userId'),
      nickName: Cookie.get('nickName'),
    }
  },
  methods: {
    handleMenu() {
      this.$store.commit('tab/collapseMenu')
    },
    personCenter() {
      //路由跳转，当页面的路由与跳转的路由不一致才允许跳转
      if ((this.$route.path !== '/personCenter')) {
        this.$router.push('/personCenter')
      }
    },
    messageCenter() {
      //路由跳转，当页面的路由与跳转的路由不一致才允许跳转
      if ((this.$route.path !== '/message/chatRoom')) {
        this.$router.push('/message/chatRoom')
      }
    },
    logOut() {
      Cookie.remove("token")
      Cookie.remove("userId")
      Cookie.remove("nickName")
      this.$router.push('/login')
    },
    getUnreadMessageCount() {
      const userId = Cookie.get("userId");
      requestUtil.post('/message/getUnreadCount', {
        receiver: userId
      }).then(res => {
        if (res.code === '0') {
          this.unreadCount = res.result.unreadCount
          //this.getMessageList()
        } else {
          this.$message.error(res.msg)
          //this.$message.error(res.msg, ˜600); // 错误消息也可以设置显示时间
        }
      })
    },
    handleMessage(data) {
      // 实现处理推送数据的逻辑
      console.log('Received data from header:', data);
      if (data.type === 12) {
        this.unreadCount = data.data.unreadCount
      }
    },
  },
  computed: {
    ...mapState('tab', {
      tags: state => state.tabsList,
    }),
    ...mapState('websocket', ['connected', 'messages']),
  },
  mounted() {
    this.getUnreadMessageCount();
    // 模拟从后端获取未读消息数量
    //this.initWebSocket();
  },
  watch: {
    messages(newMessages) {
      // 当有新消息时触发
      newMessages.forEach((message, index) => {
        if (index === newMessages.length - 1) {
          // 只处理最新的消息
          this.handleMessage(message);
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  padding: 0 20px;
  background: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .text {
    color: #fff;
    font-size: 14px;
    margin-left: 10px;
  }

  .r-content {
    .user-logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .user-id {
    font-weight: bold;
    color: white;
  }

  .l-content {
    display: flex;
    align-items: center;
    // deep 样式穿刺
    /deep/ .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-weight: normal;

        &.is-link {
          color: #666;
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
}
</style>